<template>
    <div class="header">
        <div class="navbar">
            <img class="logo" src="../../assets/1188648.png"/>
            <button class="btn">下载 APP</button>
            <img class="user" src="../../assets/1188649.png"/>
            <img class="select" src="../../assets/1158475.png" />
        </div>

        <div class="channel-menu">
            <span :id=" index1 == 1 ? 'active' : 'item' ">动画</span>
            <span :id=" index1 == 2 ? 'active' : 'item' ">番剧</span>
            <span :id=" index1 == 3 ? 'active' : 'item' ">国创</span>
            <span :id=" index1 == 4 ? 'active' : 'item' ">音乐</span>
            <span :id=" index1 == 5 ? 'active' : 'item' ">舞蹈</span>
            <span :id=" index1 == 6 ? 'active' : 'item' ">游戏</span>
        </div>

    </div>
</template>

<script>
export default {
    props:{
        index:Number
    },
    data(){
        return{
            index1:this.index
        }
    }
}
</script>

<style>
.header{
    height: 84px;
    width: 100%;
    position: relative;

}
.navbar{
    position: absolute;
    padding: 10px 12px 10px 18px;
    width: 100%;
    height: 44px;
    box-sizing: border-box;
}
.logo{
    width: 61px;
    height: 29px;
}
.btn{
    color: white;
    font-size: 15px;
    background-color: #fb7299;
    height: 24px;
    width: 80px;
    float: right;
    border: none;
    border-radius: 3px;
    font-weight: 200;
}
.user{
    float: right;
    margin-right: 10px;
    height: 24px;
    width: 24px;
}
.select{
    float: right;
    margin-right: 10px;
    height: 22px;
    width: 22px;
}
.channel-menu{
    position: absolute;
    margin-top:44px;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    display: flex;

}
#active{
    flex: 1;
    font-size: 12px;
    line-height: 10px;
    color: #fb7299;
    border-bottom: 3px solid #fb7299;
    text-align: center;
    padding: 16px;
}
#item{
    flex: 1;
    font-size: 12px;
    line-height: 10px;
    color: #505050;
    border-bottom: 1px solid rgba(7, 18, 27, 0.1);
    text-align: center;
    padding: 16px;
}
</style>
